<template>
  <div class="page" id="conference">
    <div class="page__bd">
      <div class="weui-tab">
        <div class="weui-tab__panel">
          <div class="weui-tab__panel_top">
            <i @click="goBack" class="el-icon-arrow-left return-back"></i>
            <div class="top_title">
              <p>会议室列表</p>
            </div>
          </div>
          <div class="weui-tab__panel_bd">
            <div class="roomList">
              <div class="filter_flex">
                <div class="filter_tab">
                  <span @click="setFilterPanel(1)" :class="showFilterIndex===1?'active':''">排序</span>
                  <span @click="setFilterPanel(2)" :class="showFilterIndex===2?'active':''">筛选</span>
                </div>
              </div>
              <div class="imgWrapper" id="imgWrapper">
                <div id="imgInner">
                <div class="conference-list">
                  <div class="conference_item" v-for="(item ,index) in roomList" :key="index" @click="linkTo(item)">
                    <div class="conference_item_img">
                      <img :src="item.imgUrl" alt=""/>
                    </div>
                    <div class="conference_item_span">
                      <div class="conference_item_title">{{item.name}}</div>
                      <div class="conference_item_info">
                        <span>容纳人数：{{item.contain}}人</span>
                        <span>面积：{{item.area}}㎡</span>
                      </div>
                    </div>
                    <div class="conference_item_tags">
                      <span v-for="(item,index) in item.equipments">{{item}}</span>
                    </div>
                  </div>
                </div>
              </div>
              </div>
              <!--排序 筛选弹出层-->
              <div class="popup" v-if="showFilter" @click="cancelFilter">
                <div class="order" v-if="showFilterIndex===1" @click.stop="">
                  <van-cell-group border>
                    <van-cell v-for="(item,index) in filterData.sort" :title="item.title" border
                              :key="index" @click="orderSelect(index)" :class="orderIndex===index?'active':''"></van-cell>
                  </van-cell-group>
                </div>
                <div class="filter" v-if="showFilterIndex===2" @click.stop="">
                  <div class="title">会议时间</div>
                  <van-cell-group>
                    <van-cell title="开始时间"></van-cell>
                    <van-cell title="结束时间"></van-cell>
                  </van-cell-group>
                  <div class="title">容纳人数</div>
                  <div class="num_people">
                    <span :class="index === numPeople?'active':''" class="num"  v-for="(item,index) in filterData.contain" :key="index" @click="numPeopleSelect(index)">{{item.title}}</span>
                  </div>
                  <div class="title">提供设备</div>
                  <div class="equipments">
                    <span class="equipment" v-for="(item,index) in filterData.equipments"
                          :key="index">{{item.title}}</span>
                  </div>
                  <div class="btnGroup">
                    <span class="clearBtn" @click="clearFilter">清空</span>
                    <span class="submitBtn" @click="submitFilter">提交</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import util from '../../assets/util/util';

  export default {
    name: "Index"
    , data() {
      return {
        showFilterIndex: null
        , showFilter: false
        ,orderIndex:null
        ,numPeople:null
        , filterData: {
          sort: [{
            id: 0,
            title: "价格最低"
          },
            {
              id: 1,
              title: "容量最多"
            },
            {
              id: 2,
              title: "设备最全"
            },
          ],
          contain: [{
            id: 0,
            title: "4人以下"
          },
            {
              id: 1,
              title: "5-8人"
            },
            {
              id: 2,
              title: "8-12人"
            },
            {
              id: 3,
              title: "12-20人"
            },
            {
              id: 4,
              title: "20人以上"
            },
          ],
          equipments: [{
            id: 0,
            title: "投影仪"
          },
            {
              id: 1,
              title: "欢迎屏"
            },
            {
              id: 2,
              title: "视屏设备"
            },
            {
              id: 3,
              title: "电话会议设备"
            },
            {
              id: 4,
              title: "钢笔"
            },
            {
              id: 5,
              title: "麦克风"
            },
          ],
        }
        , roomList: [
          {
            imgUrl: "http://www.yw2005.com/baike/uploads/allimg/160618/1-16061Q52023426.jpg"
            , name: 'A区会议室1'
            , contain: Math.floor(Math.random() * 50)
            , area: Math.floor(Math.random() * (200 - 20) + 20)
            , equipments: util.getRandomArrayElement(["投影仪", "欢迎屏", "视屏设备", "电话会议设备", "钢笔", "麦克风"])
          }
          , {
            imgUrl: 'http://www.yw2005.com/baike/uploads/allimg/160618/1-16061Q52023426.jpg'
            ,
            name: 'A区会议室2'
            , contain: Math.floor(Math.random() * 50)
            , area: Math.floor(Math.random() * (200 - 20) + 20)
            , equipments: util.getRandomArrayElement(["投影仪", "欢迎屏", "视屏设备", "电话会议设备", "钢笔", "麦克风"])
          }
          , {
            imgUrl: 'http://www.yw2005.com/baike/uploads/allimg/160618/1-16061Q52023426.jpg'
            , name: 'A区会议室3'
            , contain: Math.floor(Math.random() * 50)
            , area: Math.floor(Math.random() * (200 - 20) + 20)
            , equipments: util.getRandomArrayElement(["投影仪", "欢迎屏", "视屏设备", "电话会议设备", "钢笔", "麦克风"])
          }
          , {
            imgUrl: 'http://www.yw2005.com/baike/uploads/allimg/160618/1-16061Q52023426.jpg'
            , name: 'A区会议室4'
            , contain: Math.floor(Math.random() * 50)
            , area: Math.floor(Math.random() * (200 - 20) + 20)
            , equipments: util.getRandomArrayElement(["投影仪", "欢迎屏", "视屏设备", "电话会议设备", "钢笔", "麦克风"])
          }
        ]
      }
    }
    , methods: {
      goBack() {
        this.$router.go(-1);
      }
      , setFilterPanel(index) {
        this.showFilterIndex = index;
        this.showFilter = true;
      }
      , cancelFilter() {
        this.showFilter = false;
      }
      ,linkTo(item){
        this.$router.push('/RoomDetail?title='+item.name+'&contain='+item.contain+'&equipments='+item.equipments)
      }
      ,orderSelect(index){
        this.orderIndex = index;
      }
      ,numPeopleSelect(index){
        this.numPeople = index;
      }
      ,clearFilter(){
        this.numPeople=null;
      }
      ,submitFilter(){

      }
    }
    ,mounted() {
      let imgWrapper = document.querySelector("#imgWrapper");
      let imgInner = document.querySelector("#imgInner");
      let idx=5;
      imgWrapper.addEventListener('scroll', ()=>{
        if(imgWrapper.scrollTop+imgWrapper.clientHeight>=imgInner.clientHeight){
          for(let i=0;i<5;i++){
            this.roomList.push({
              imgUrl: "http://www.yw2005.com/baike/uploads/allimg/160618/1-16061Q52023426.jpg"
              , name: 'A区会议室'+idx++
              , contain: Math.floor(Math.random() * 50)
              , area: Math.floor(Math.random() * (200 - 20) + 20)
              , equipments: util.getRandomArrayElement(["投影仪", "欢迎屏", "视屏设备", "电话会议设备", "钢笔", "麦克风"])
            })
          }
        }
      })
    }
  }
</script>

<style scoped>
  .filter_tab {
    display: flex;
    width: 100%;
    line-height: 40px;
    border-bottom: 1px solid #ddd;
    position: relative;
    z-index: 2;
    background: #fff;
  }

  .filter_tab span {
    flex: 1;
    text-align: center;
    font-size: 15px;
  }

  .filter_tab span:after {
    content: '';
    display: inline-block;
    vertical-align: 2px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #bbb;
    margin-left: 4px;
  }

  .imgWrapper {
    height: calc(100vh - 96px);
    position: fixed;
    width: 100%;
    overflow-y: scroll;
  }

  .popup {
    position: fixed;
    top: 86px;
    height: calc(100vh - 86px);
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
  }

  .popup .title {
    width: 100%;
    background-color: #eee;
    padding: 6px 6px 6px 10px;
    font-size: 15px;
    color: #333;
  }

  .popup .num_people, .popup .equipments {
    background-color: #fff;
    padding: 5px 5px 5px 5px;
  }

  .num_people .num, .equipments .equipment {
    border: 1px solid #eee;
    margin: 5px 10px;
    display: inline-block;
    padding: 5px;
    font-size: 14px;
    color: #333;
  }
  .num_people .num.active{
    background-color: #f7982a;
    color: #fff;
  }
  .btnGroup {
    padding: 10px;
    background-color: #fff;
  }

  .btnGroup span {
    display: inline-block;
    padding: 5px;
    border: 1px solid #eee;
    width: 45%;
    text-align: center;
    border-radius: 3px;
  }

  .btnGroup .clearBtn {
    background-color: #efefef;
  }

  .btnGroup .submitBtn {
    background-color: #f7982a;
    color: #fff;
  }

  .conference_item {
    padding: 10px;
    border-bottom: 1px solid #e8e8e8;
  }

  .conference_item_img img {
    width: 100%;
    height: 240px;
  }
  .conference_item_tags:not(:empty){
    margin-top: 5px;
  }
  .conference_item_tags span{
    padding: 3px 8px;
    border: 1px solid #f7982a;
    line-height: 1;
    color: #f7982a;
    font-size: 14px;
    border-radius: 2px;
    margin-right: 5px;
    white-space: nowrap;

  }
  .order .van-cell.active{
    color:#f7982a;
  }
</style>
<style>
  .filter_tab > span.active:after {
    border-top: 0;
    border-bottom: 6px solid #f7982a;
  }

  .filter_tab > span.active {
    color: #f7982a;
  }
</style>
